@extends('admin.common.web')

@section('title','商品添加')
@section('content')
    <!-- Page Breadcrumb -->
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <a href="{{ route('admin.index.index') }}">系统</a>
            </li>
            <li>
                <a href="{{ route('admin.goods.index') }}">商品管理</a>
            </li>
            <li class="active">添加商品</li>
        </ul>
    </div>
    <!-- /Page Breadcrumb -->

    <!-- Page Body -->
    <div class="page-body">

        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <div class="widget">
                    <form class="form-horizontal" role="form" action="{{ route('admin.goods.store') }}" onsubmit="return false" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="widget-body">
                            <div class="widget-main ">
                                <div class="tabbable">
                                    <ul class="nav nav-tabs tabs-flat" id="myTab11">
                                        <li class="active">
                                            <a data-toggle="tab" href="#home11">
                                                基本信息
                                            </a>
                                        </li>
                                        <li class="">
                                            <a data-toggle="tab" href="#profile11">
                                                商品描述
                                            </a>
                                        </li>
                                        <li class="">
                                            <a data-toggle="tab" href="#profile12">
                                                商品属性
                                            </a>
                                        </li>
                                        {{--<li class="">
                                            <a data-toggle="tab" href="#profile13">
                                                商品类型
                                            </a>
                                        </li>--}}
                                        <li class="">
                                            <a data-toggle="tab" href="#profile14">
                                                商品相册
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="tab-content tabs-flat">
                                        <div id="home11" class="tab-pane active">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label no-padding-right">商品名</label>
                                                <div class="col-sm-6">
                                                    <input class="form-control" name="goods_name" value="男士夏季鞋子<?=mt_rand(10, 1000)?>测试<?=mt_rand(10, 1000)?>商品<?=mt_rand(10, 1000)?>潮流男鞋<?=mt_rand(10, 1000)?>佐佑理<?=mt_rand(10, 1000)?>古河渚" required="" type="text">
                                                </div>
                                                <p class="help-block col-sm-4 red">* 必填</p>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label no-padding-right">商品图片</label>
                                                <div class="col-sm-6">
                                                    <input name="thumb" type="file">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label no-padding-right">商品分类</label>
                                                <div class="col-sm-6">
                                                    <select name="category_id" required>
                                                        <option value="">请选择分类</option>
                                                        @foreach($category as $vo)
															<?php
															if ($vo['level'] > 0) {
																$str = str_repeat('---', $vo['level']);
															} else {
																$str = '';
															}
															?>
                                                            <option value="{{ $vo['id'] }}"><?=$str;?>{{ $vo['category_name'] }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <p class="help-block col-sm-4 red">* 必填</p>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label no-padding-right">商品品牌</label>
                                                <div class="col-sm-6">
                                                    <select name="brand_id" required>
                                                        <option value="">请选择品牌</option>
                                                        @foreach($brand as $vo)
                                                            <option value="{{ $vo['id'] }}">{{ $vo['brand_name'] }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <p class="help-block col-sm-4 red">* 必填</p>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label no-padding-right">商品状态</label>
                                                <div class="col-sm-6">
                                                    <div class="radio" style="float: left;padding-right: 10px;">
                                                        <label>
                                                            <input name="status" type="radio" value="1" checked="checked">
                                                            <span class="text">上架 </span>
                                                        </label>
                                                    </div>
                                                    <div class="radio" style="float: left;">
                                                        <label>
                                                            <input name="status" type="radio" value="0" class="inverted">
                                                            <span class="text">下架</span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-2 control-label no-padding-right">商品排序</label>
                                                <div class="col-sm-6">
                                                    <input class="form-control" name="sort" required="" value="0" type="text">
                                                </div>
                                            </div>
                                        </div>

                                        <div id="profile11" class="tab-pane">
                                            <textarea id="container" name="description">测试描述 find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
                                                find()方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。 findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
                                                filter()方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。
                                                filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。
                                                那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。filter 不会改变原数组。
                                                遍历数组全部元素，利用回调函数对数组进行操作，自动遍历整个数组，且无法break中途跳出循环，不可控，不支持return操作输出，return只用于控制循环是否跳出当前循环。
                                                回调有三个参数：第一个参数是遍历的数组内容，第二个参数是对应的数组索引，第三个参数是数组本身。
                                            </textarea>
                                        </div>

                                        <div id="profile12" class="tab-pane">
                                            {{--<div class="form-group">
                                                <label for="inputEmail3" class="col-sm-1 control-label no-padding-right">Email</label>
                                                <div class="col-sm-11">
                                                    <label>
                                                        <input type="checkbox" checked="checked">
                                                        <span class="text">Basic</span>
                                                    </label>
                                                </div>
                                            </div>--}}
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label no-padding-right">商品类型</label>
                                                <div class="col-sm-6">
                                                    <select name="type_id" required>
                                                        <option value="">请选择所属类型</option>
                                                        @foreach($typeList as $vo)
                                                            <option value="{{ $vo['id'] }}">{{ $vo['type_name'] }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div id="spec">

                                            </div>
                                            <div id="stock">
                                                {{--库存--}}
                                                {{--<table class="table table-hover table-striped table-bordered">
                                                    <thead class="bordered-blueberry">
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Name</th>
                                                        <th>Family</th>
                                                        <th>Username</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td>1</td>
                                                        <td>Steve</td>
                                                        <td>Jobs</td>
                                                        <td>steve</td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>Bill</td>
                                                        <td>Gates</td>
                                                        <td>billy</td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>Mark</td>
                                                        <td>Zuckerberg</td>
                                                        <td>markz</td>
                                                    </tr>
                                                    <tr>
                                                        <td>4</td>
                                                        <td>Marissa</td>
                                                        <td>Mayer</td>
                                                        <td>marim</td>
                                                    </tr>
                                                    </tbody>
                                                </table>--}}
                                            </div>

                                        </div>
                                        <!--<div id="profile13" class="tab-pane">

                                            <div class="form-group">
                                                <label class="col-sm-2 control-label no-padding-right">商品类型</label>
                                                <div class="col-sm-6">
                                                </div>
                                            </div>
                                            <div id="attr_list">
                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label no-padding-right">颜色</label>
                                                    <div class="col-sm-6">
                                                        <a href="javascript:void(0);">[+]</a>
                                                        <select name="goods_weight">
                                                            <option value="kg">蓝色</option>
                                                            <option value="kg">黄色</option>
                                                        </select>
                                                        <input class="form-control" name="brand_name" style="width:150px;display: inline-block;box-shadow: none" type="text">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label no-padding-right">颜色</label>
                                                    <div class="col-sm-6">
                                                        <select name="goods_weight">
                                                            <option value="kg">蓝色</option>
                                                            <option value="kg">黄色</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="col-sm-2 control-label no-padding-right">材质</label>
                                                    <div class="col-sm-6">
                                                        <input class="form-control" name="brand_name" style="width:150px;display: inline-block;box-shadow: none" type="text">
                                                    </div>
                                                </div>
                                            </div>

                                        </div>-->
                                        <div id="profile14" class="tab-pane">
                                            <div class="form-group">
                                                <div class="col-sm-6">
                                                    <a style="float: left;padding-right: 5px" onclick="cloneMe(this)" href="javascript:void(0);">[+]</a>
                                                    <input name="album[]" type="file">
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    {{--<button type="submit" id="submit_btn" class="btn btn-default">保存信息</button>--}}
                                    <button id="submit_btn" class="btn btn-info">保存信息</button>
                                    <a href="JavaScript:window.history.go(-1);" class="btn btn-default">返回</a>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>

    </div>
    <!-- /Page Body -->
@endsection

@section('script')
    <script type="text/javascript" src="{{  asset('js/api_request.js') }}"></script>
    <script type="text/javascript" src="{{  asset('js/common.js') }}"></script>
    <script type="text/javascript" src="{{  asset('plugins/ueditor/1.4.3/ueditor.config.js') }}"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="{{  asset('plugins/ueditor/1.4.3/ueditor.all.js') }}"></script>
    <script type="text/javascript" src="{{  asset('plugins/ueditor/1.4.3/lang/zh-cn/zh-cn.js') }}"></script>
    <!-- 实例化编辑器 -->

    <script>
        $(() => {
            /**
             *  实例化编辑器
             * */
            var ue = UE.getEditor('container', {
                toolbars: [
                    ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                        'directionalityltr', 'directionalityrtl', 'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                        'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                        'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                        'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                        'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                        'print', 'preview', 'searchreplace', 'drafts', 'help']
                ],
                initialFrameHeight: 320,
                autoHeightEnabled: true,
                autoFloatEnabled: true
            });

            //展示分类下的规格
            $('select[name="type_id"]').change(async function () {

                let type_id = $(this).val();

                await requestData('{{ route("admin.goods.ajaxGetSpec") }}', {'type_id': type_id}).then((res) => {
                    let html = '';

                    $.each(res.data, function (k, v) {
                        html += '<div class="form-group">';
                        html += '<label class="col-sm-1 control-label no-padding-right">';
                        html += '<input name="spec[' + v.id + ']" type="hidden">' + v.spec_name;
                        html += '</label>';

                        html += '<div class="col-sm-11">';

                        $.each(v.spec_value, function (k1, v1) {
                            html += '<label>';
                            html += '<input type="checkbox" class="spec_ids" name="spec[' + v.id + '][]" value="' + v1.id + '">';
                            html += '<span class="text">' + v1.value + '</span>';
                            html += '</label>';
                        });
                        html += '</div>';
                        html += '</div>';
                    });

                    $('#spec').html('');
                    $('#stock').html('');

                    $('#spec').append(html);
                }).catch((res) => {
                    $('#spec').html('');
                    $('#stock').html('');
                })
            })

            //异步提交数据
            $('#submit_btn').click(async function () {
                $(this).prop('disabld', true);
                let data = new FormData($('form')[0]);

                await formRequest('{{ route("admin.goods.store") }}', data, 'post').then((res) => {
                    layer.msg(res.msg);
                    $(this).prop('disabld', false);
                    setTimeout(() => {
                        window.location.href = '{{ route('admin.goods.index') }}';
                    }, 500);
                }).catch((res) => {
                    layer.msg(res.msg);
                    $(this).prop('disabld', false);
                });

                return false;
            })
        });

        //库存表格
        $('#spec').on('click', 'input', function () {
            let ipt = $('#spec input[type="checkbox"]:checked');
            let ids = [];
            $.each(ipt, function (k, v) {
                ids.push($(this).val());
            });

            requestData('{{ route("admin.goods.ajaxGetStockDicar") }}', {"ids": JSON.stringify(ids)}, 'post').then((res) => {
                $('#stock').html('');

                let html = '';
                html += '<table class="table table-hover table-striped table-bordered">';
                html += '<tbody>';

                let i = <?=mt_rand(80,7000)?>;
                $.each(res.data, function (k, v) {
                    console.log(v);
                    html += '<tr>';
                    //如果的单种规格属性的 例如只有颜色 没有其他
                    let sku_ids = [];
                    if (typeof v == 'string') {
                        html += '<td>' + v + '</td>';
                        sku_ids.push(k);
                    } else {
                        //多个规格的
                        $.each(v, function (k1, v1) {
                            html += '<td>' + v1 + '</td>';
                            sku_ids.push(k1);
                            console.log(v1);
                        })
                    }
                    html += '<td>';
                    html += '<input type="hidden" name="sku[]" value="' + sku_ids.join(',') + '">';
                    html += '库存：<input type="number" placeholder="请输入库存" value="' + (i += 10) + '" name="sku_num[]">';
                    html += '</td>';

                    html += '<td>';
                    html += '价格：<input type="text" placeholder="输入价格" oninput="checkPrice(this,1,9999999)" onblur="checkPrice(this,2,9999999)" value="' + (i -= 1) + '" name="sku_price[]">';
                    html += '</td>';
                    html += '</tr>';
                })
                html += '</tbody>';
                html += '</table>';

                $('#stock').append(html);
            }).catch((res) => {
                $('#stock').html('');
            })
        });

        /**
         * 克隆节点
         * @param btn
         */
        function cloneMe(btn) {
            let mybtn = $(btn);
            let item = $(mybtn).parent().parent('.form-group');

            let album_item = $('#profile14 .form-group');

            if (mybtn.html() == '[+]') {

                if(album_item.length >= 5){
                    layer.msg('不能再添加了');
                    return false;
                }

                let newItem = item.clone();
                newItem.find('a').html('[-]');

                item.after(newItem);
            } else {
                item.remove();
            }
        }


    </script>
@endsection
